<template>
  <div id="HomePage">
    <div class="welcome">
      <div class="container">
        <h2>流水之为物也，不盈科不行
          <span>君子之志于道也</span> 不成章不达</h2>
        <p>与时俱进，守正创新。随着数字时代的来临，全面转型数字律所，着力打造云端律所办公新趋势。“Law
          Wit”云端办公系统全面投入使用，实现律师足不出户在线办公。盈科大数据管控平台全面上线，实现对盈科全国案件量、业务类型、客户信息等数据实时监控，数据成为律师事务所最宝贵资产。</p>
        <ul class="wel">
          <li>获取免费咨询和帮助</li>
          <li class="phone">400-851-7517</li>
          <li>24小时接听</li>
        </ul>
      </div>
    </div>
    <div class="about">
      <div class="container">
        <h3 class="tittle">关于我们</h3>
        <div class="about-top">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-image style="width: 100%;" :src="require('@/assets/img/ab.jpg')"></el-image>
              <div class="quote-author-info">
                <p>There are many variations of passages of Lorem Ipsum available, but the majority some lorem.</p>
                <div class="author-title">
                  <span class="author-designation">Advocate,</span>
                  Joseph
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="诉讼与仲裁" name="1">
                  <div class="collapse-text">
                    争议解决一直是锦天城的核心优势业务。如今，凭借遍布全国的分所及覆盖全国的合作网络，锦天城已经形成了一套完整的争议解决体系。面对各地客户的不同需求，尤其是在处理横跨多个地区、法律关系复杂、大型/系列纠纷等特殊案件时，锦天城可以高效完成跨区域联动，设计并落实最大限度保护客户利益的服务方案。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="证券与资本市场" name="2">
                  <div class="collapse-text">
                    我们在客户和行业监管者方面都具有良好的口碑。我们也经常受邀为中国政府官员就新制定的政策法规提供专家意见。我们的多名合伙人曾任或现任中国证监会发行审核委员会委员，同时，本所合伙人亦受聘担任上交所科创板首届股票上市委员会委员，受聘担任全国股转公司精选层首届挂牌委员会委员。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="国际贸易" name="3">
                  <div class="collapse-text">
                    随着中国对外贸易在过去数十年中的迅猛发展，锦天城的国际贸易法律业务有了长足的发展，并始终处于国际国内领先地位。锦天城已经在贸易救济措施(反倾销、反补贴和保障措施)、世界贸易组织（WTO）争端解决、海关法、进出口管制措施和贸易制裁、中国对外贸易政策、国际货物买卖、国际运输和保险、国际支付等关键业务领域积累了丰富的经验。多家国际著名法律评级机构（包括亚洲法律杂志（ALB）、钱伯斯（Chambers）等）长期连续将锦天城列入国际贸易领域领先律师事务所行列。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="税法" name="4">
                  <div class="collapse-text">
                    我们的税务律师均毕业于国内外知名院校的法学或财会类专业。其中，大多数税务律师同时具有律师执业资格和注册会计师、会计师、（注册）税务师资格或职称的复合型人才。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="跨境投资" name="4">
                  <div class="collapse-text">
                    随着中国经济的蓬勃发展，国内很多企业以兼并收购和直接投资的方式向海外做战略性拓展，同时境外很多企业以外商直接投资等形式扩张其在中国的商业版图。锦天城深刻了解国内外企业的需求，谙熟国内外法律监管环境、商业惯例，是在外商投资、海外投资和境内外资本市场表现最活跃的律师团队之一，被《法律500强》（Legal
                    500）在《中国商业律师事务所指南》中评价为是一家在外商直接投资领域顶尖的上海律师事务所，是“其他律师事务所希望成为的公司和商业律师事务所”。
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      activeName: '1'
    }
  }
}
</script>

<style scoped lang="scss">
#HomePage {

  .welcome {
    padding: 5em 0;
    text-align: center;

    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;

      p {
        line-height: 1.9em;
      }
    }

    h2 {
      font-size: 3em;
      color: #003366;
      width: 90%;
      line-height: 1.3em;
      margin: 0 auto;
    }

    p {
      color: #777;
      font-size: 1em;
      line-height: 1.9em;
      width: 68%;
      margin: 2% auto 0;
    }

    ul {

      &.wel {
        margin-top: 2em;

        li {
          display: inline-block;
          margin-right: 1em;
          list-style: none;
          color: #003366;
          font-size: 1.2em;
          font-weight: 600;

          &.phone {
            color: #fff;
            font-size: 23px;
            background: #ffcc00;
            font-weight: 400;
            padding: 9px 18px;
            height: 50px;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .about-top {
    img {
      vertical-align: middle;
    }

    .quote-author-info {
      background: rgba(255, 255, 255, 0.9);
      bottom: 0;
      padding: 23px 20px;
      position: absolute;
      width: 30%;
      top: 73%;
      border: 4px solid #fff;
      height: 23%;
      left: 3%;

      p {
        font-size: 0.9em;
        color: #777;
        line-height: 1.9em;
        margin-bottom: 0.5em;
      }

      .author-title {
        font-size: 1.3em;
        text-transform: uppercase;
        color: #003366;
        font-weight: 700;
      }
    }
  }

  .collapse-text {
    line-height: 27px;
    font-size: 15px;
    padding: 31px 20px;
    font-family: 'Raleway', sans-serif;
    text-shadow: 1px 1px 1px rgb(255 255 255 / 80%);
    background-color: #fff;
  }
}
</style>
<style lang="scss">
#HomePage {
  .el-collapse-item__header {
    line-height: 33px;
    font-size: 19px;
    background: #FFCC00;
  }
}
</style>
